<template>
    <div class="left col-xs-2">
        <div>
            <div class="icon-box">
                <img src="@/assets/vote/computer.png" class="icon" alt="" />
            </div>
            <p class="main-tex">投票系统</p>
            <!-- 清除浮动效果的高度塌陷 -->
            <!-- <div style="clear: both"></div> -->
        </div>
        <ul>
            <button class="choose" @click="mystatus()" :style="status == '我的投票'
                ? '    border-left: 3px solid #74b0ff;'
                : 'border:none'
                ">
                <img src="@/assets/vote/person.png" v-if="status != '我的投票'" class="choose-icon" alt="" />
                <img src="@/assets/vote/Personal.png" v-if="status == '我的投票'" class="choose-icon" alt="" />

                <li :style="status == '我的投票' ? 'color:#006eff' : 'color:#000'">
                    我的投票
                </li>
            </button>
            <button class="choose" @click="recordstatus()" :style="status == '投票记录'
                ? '    border-left: 3px solid #74b0ff;'
                : 'border:none'
                ">
                <img src="@/assets/vote/record.png" v-if="status != '投票记录'" class="choose-icon" alt="" />
                <img src="@/assets/vote/recorded.png" v-if="status == '投票记录'" class="choose-icon" alt="" />
                <li :style="status == '投票记录' ? 'color:#006eff' : 'color:#000'">
                    投票记录
                </li>
            </button>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            status: "我的投票",
        }
    },
    methods: {
        recordstatus() {
            //切换左侧status 状态
            window.location.href = "./voting_record";
            // this.status="投票记录"
        },
        mystatus() {
            window.location.href = "./voting";
            
            // this.status="我的投票"
        },
    },
    created(){
        if(window.location.href.includes('voting')){
            this.status="我的投票"
        }
        if(window.location.href.includes('voting_record')){
            this.status="投票记录"
        }
        
        
    }
}
</script>

<style>
.left {
    width: 233px;
    background-color: #ffffff;
    border: solid 1px #c9c9c9;
    position: absolute;
    height: 100vh;
}

.choose {
    margin: 0;
    padding: 0;
    outline: none;
    border-radius: 0;
    background-color: transparent;
    line-height: inherit;

    width: -webkit-fill-available;
    border: none;
}

.icon-box {
    margin-top: 4.5vh;
    margin-left: 2.7vw;
    width: 2.5vw;
    height: 2.5vw;
    background-color: #006eff;
    border-radius: 0.5vw;
}

.icon {
    width: 2vw;
    height: 2vw;
    margin-top: 0.6vh;
}

.main-tex {
    width: 19vw;
    margin-top: -2.3vw;
    font-family: AdobeHeitiStd-Regular;
    font-size: 1.8vw;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #000000;
}

.choose {
    margin-top: 5vh;
}

.choose li {
    display: inline;
    font-family: AdobeHeitiStd-Regular;
    font-size: 1.5vw;
    font-weight: normal;
    font-stretch: normal;
    line-height: 42px;
    letter-spacing: 0px;
    color: #000000;
}

.choose-icon {
    width: 1.8vw;
    height: 1.8vw;
    margin-top: -0.5vw;
    margin-right: 0.3vw;
}
</style>